$(function(){
    //真正写入代码的地方
   loadStudentList();
});
function loadStudentList(){
    $.ajax({
        //这样就可以用“gatAll()”方法
        url:"/api/student/list"
    }).done(function(data){
        //在数据台上打印出来
        //console.log(data);
        //设置一个字段名为“html”的变量
        let html  =  "";
        //进行逐条插入
        data.forEach((element, index) => {
            html += "<tr>";
            html += "<td>"+ element.id +"</td>"
            html += "<td>"+ element.name +"</td>"
            html += "<td>"+ element.age +"</td>"
            html += "<td>"+ element.sex+"</td>"
            html += "<td>" + element.sno + "</td>"
            html+= "<th> <a href='#' onclick='showStudenDlg("+element.id
                +")'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById(" + element.id +")'>删除</a></th>"
            //(我)html += "<th> <a href='#' onclick='deleteStuDlg("+ element.id +")'>删除</a></th>"
            html +="</tr>"
        })
        $("#studentTable").html(html)
    });
}
let layerIndex;
//学生新增、更改对话框
function showStudenDlg(id){
    //默认标题为“新增学生”
    let title ="新增学生";
    if (id){
        //如果id存在则为编辑
        title = "编辑学生信息"
        //读取学生信息并赋值
        $("fromId").css("display","block");
        // 通过ajax中的element，但可能不够完整。
        $.ajax({
            url:"/api/student/"+id,
            method:"GET"
        }).done(result=>{
            //打印结果
            console.log(result)
            //遍历result对象，并将信息依次赋值到#studFrom表单中
            $.each(result, function(key, value){
                //KEY为读到的属性，value为其属性的值
                //修改选择器，确保选择的是#studFrom中的字段
                var field = $('#studForm [name = "' + key + '" ]');
                if(field.is(':radio')){
                    //选中对应单选框
                    field.filter('[value="'+ value +'"]').prop("checked",true);
                }
                else if(field.is(':checkbox')){
                    //选中复选框
                    field.prop('checked',value=="yes");
                }
                else {
                    //填充文本框或其他字段
                    field.val(value)
                }
            });
        })
    }else {
        //否则就是新增
        $("#studForm")[0].reset();
        $("fromId").css("display","none");
    }
    layerIndex=layer.open({
        type: 1,
        title: title,//属性“title”=上述“let”声明的“title”值
        area:['520px','auto'],
        content:$('#studForm')//捕获层
    });
}
layui.use(function () {
    layui.form.on('submit(stud-dlg)', function (data) {
        event.preventDefault();//阻止 表单默认提交
        commitStuDlg();
    })
})
function commitStuDlg(){
    //先进行读取学生的值
    let id = $("#id").val();
    let formData = $("#studForm").serialize();
    if (id!=null && id!=""){
        //表示更新学生
        $.ajax({
            url:"/api/student/update",
            method:"PUT",
            data:formData,
        }).done(result=>{
            console.log(result);
            if(result.id){
                //读取学生列表
                loadStudentList();
                //关闭弹出层
                console.log("添加成功");
                if (layerIndex){
                    layer.close(layerIndex);
                }
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("请求错误:"+ textStatus +"-"+errorThrown);
            alert("发生一个错误，请重试");
        });
    }
    else{
        //表示新增学生
        //新增学生需要进行以下
        //新增学生，验证表单是否合法，发送到insert，关闭弹出层，读取并刷新表中的数据
        $.ajax({
            url:"/api/student/add",
            method:"POST",
            data:formData,
        }).done(result=>{
            console.log(result);
            if(result.id){
                //读取学生列表
                loadStudentList();
                //关闭弹出层
                console.log("添加成功");
                if (layerIndex){
                    layer.close(layerIndex);
                }
            }
        }).fail((jqXHR, textStatus, errorThrown) => {
            console.error("请求错误:"+ textStatus +"-"+errorThrown);
            alert("发生一个错误，请重试");
        });
    }
    $("#btnOK").prop('disabled',true).addClass('layui-btn-disabled');
}
//（我）function deleteStuDlg(){
//    let title = "删除学生信息";
//    $.ajax({
//        url:"/api/student/delete",
//        method:"DELETE"
 //   }).done(result=> {
 //       //打印结果
//        console.log(result)
        //遍历result对象，并将信息依次赋值到#studFrom表单中
        //显示学生信息，点击确认按钮并删除，弹出log（）提示字段“删除成功”
//        });
//    layerIndex=layer.open({
//        type: 1,
//        title: title,//属性“title”=上述“let”声明的“title”值
//        area:['520px','auto'],
//        content:$('#studForm')//捕获层//
 //   });
//}
function deleteById(id){
    //删除操作，需要进行提示确认
        layer.confirm('确认删除？一旦删除不可恢复', {icon: 3}, function(){
           $.ajax({
               url:"/api/student/delete/"+id,
               method:"DELETE"
           }).done(result=>{
               //刷新
             loadStudentList();
           });
           layer.closeAll();//关闭所有弹出层
        }, function(){
        });
}
